<template>
  <div class="container">
    <div class="wrapper">
      <p class="login-title">MG Supplier Portal</p>
      <div class="login-wrapper">
        <div class="login-cnt">
          <Form class="login-form" ref="loginForm" :model="loginForm" :rules="ruleCustom" :label-width="90" show-message autocomplete="on">
            <div class="login-item">
              <FormItem label="User Name" prop="username">
                <Input type="text" v-model="loginForm.username" placeholder="User Name" class="input"></Input>
              </FormItem>
            </div>
            <FormItem label="Password"  prop="password" class="login-item">
              <Input type="password" v-model="loginForm.password" placeholder="Password" class="input"></Input>
            </FormItem>
            <FormItem label="Code"  prop="captcha" class="login-item">
              <div class="code-wrapper">
                <Input type="text" v-model="loginForm.captcha" placeholder="Code" class="input" style="width: 130px"></Input>
                <img :src="captchaImgCode" alt="code">
                <span @click="getCaptchaFunc" class="get-captcha-code">Change one</span>
              </div>
            </FormItem>
            <FormItem class="login-item">
              <div class="remember-wrapper">
                <Checkbox v-model="rememberMe">Remember me</Checkbox>
                <p class="forgot-link" @click="forgotPasswordToggle">Forgot password?</p>
              </div>
            </FormItem>
            <FormItem class="login-btn-group clearfix">
              <Button type="primary" @click="handleSubmit('loginForm')" class="login-btn">Login</Button>
              <Button type="default" @click="handleReset('loginForm')" class="login-btn">Reset</Button>
            </FormItem>
          </Form>

          <Alert type="error" show-icon v-if="loginFailMsg" closable>
            An error prompt
            <span slot="desc">
            {{loginFailMsg}}
        </span>
          </Alert>
        </div>
      </div>
    </div>

    <section class="forgot-password-wrapper" v-if="forgotPasswordShow">
      <div class="forgot-password-cnt">
        <div class="masking"></div>
        <div class="forgot-password-box">
          <div class="forgot-password">
            <Icon type="md-close" class="close-btn" @click="forgotPasswordToggle" />
            <section v-if="forgotPasswordStep == 1">
              <h3 class="title">Forgotten your password?</h3>
              <p class="tip-txt">Please enter your email address below and we'll email you instructions to reset it</p>
              <Form :label-width="80">
                <FormItem label="Email" prop="email">
                  <Input type="email" placeholder="Email address" style="max-width: 280px;"></Input>
                </FormItem>
                <FormItem>
                  <Button type="primary" size="large" @click="forgotPasswordSubmit">Reset Password</Button>
                </FormItem>
              </Form>
            </section>
            <section v-if="forgotPasswordStep == 2" class="email-sended-wrapper">
              <div class="send-successful" v-if="forgotPasswordEmailSendedSuccessful">
                <Icon type="ios-checkmark-circle-outline" class="icon" />
                <p>Instructions to reset your password have been sent to</p>
                <p class="bold">mia.wu@motionglobal.com</p>
              </div>
              <div class="send-failure" v-else>
                <Icon type="ios-close-circle-outline" class="icon" />
                <p class="bold">There has been a problem.</p>
                <Button type="primary" size="large" @click="forgotPasswordTryAgain" class="btn">Try Again</Button>
              </div>
            </section>
          </div>
        </div>
      </div>
    </section>

  </div>

</template>

<script>
  import { mapState, mapMutations, mapActions } from 'vuex';
  import { getmd5 } from '@/components/mixin';
  import { login, getCaptcha } from '@/api/index';
  export default {
    name: 'Login',
    computed: {
      ...mapState(['userInfo'])
    },
    mixins: [ getmd5 ],
    data () {
      const validatePassword = (rule, value, callback) => {
        if (value == '') {
          callback(new Error('Please enter your password'));
        } else {
          callback();
        }
      };
      const validateUsername = (rule, value, callback) => {
        if (value == '') {
          return callback(new Error('Name cannot be empty'));
        } else {
          callback();
        }
      };
      const validateCaptcha = (rule, value, callback) => {
        if (value == '') {
          callback(new Error('Please enter your verification code'));
        } else {
          callback();
        }
      };

      return {
        loginForm: {
          password: '',
          username: '',
          captcha: ''
        },
        rememberMe: true,
        captchaImgCode: '',
        ruleCustom: {
          password: [
            { required: true,  validator: validatePassword, trigger: 'blur' }
          ],
          username: [
            { required: true,  validator: validateUsername, trigger: 'blur' }
          ],
          captcha: [
            { required: true, validator: validateCaptcha, trigger: 'blur' }
          ]
        },
        loginFailMsg: '',
        forgotPasswordShow: false,
        forgotPasswordStep: 1,
        forgotPasswordEmailSendedSuccessful: false
      }
    },
    created () {
    	this.getCaptchaFunc();
      this.getUserInfo();
    },
    methods: {
      ...mapActions(['getUserInfo']),
      ...mapMutations([ 'RECORD_USERINFO']),
      getCaptchaFunc () {
        getCaptcha().then(res => {
          this.captchaImgCode = res.data.message;
        });
      },
      handleSubmit (form) {
        this.loginFailMsg = '';
//        console.log(this.getmd5(this.loginForm.password))
        this.$refs[form].validate((valid) => {
          if (valid) {
            login(this.loginForm.username, this.getmd5(this.loginForm.password), this.loginForm.captcha, this.rememberMe).then(res => {
              let resData = res.data;
              console.log('resData', resData)
              if (resData.status == 0) {
                this.loginFailMsg = resData.error;
                return false;
              } else if (resData.status == 1) {
                this.$Message.success('Success!');
                this.RECORD_USERINFO(resData.data);
                this.$router.push('/dashbord');
              }
            });
          } else {
            this.$Message.error('Fail!');
          }
        });
      },
      handleReset (form) {
        this.$refs[form].resetFields();
      },
      forgotPasswordSubmit (form) {
      	if (true) {
      		this.forgotPasswordStep = 2;
          this.forgotPasswordEmailSendedSuccessful = true
        }
      },
      forgotPasswordTryAgain () {
        this.forgotPasswordStep = 1
      },
      forgotPasswordToggle () {
      	this.forgotPasswordShow = !this.forgotPasswordShow;
        this.forgotPasswordStep = 1;
      }
    },
    watch: {
      userInfo: function () {
        if (!!this.userInfo) {
          this.$router.push('/dashbord')
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  @import '../../assets/sass/mixin';
  .wrapper {
    width: 45%;
    min-width: 350px;
    max-width: 500px;
    height: 100%;
    margin: 7% auto auto;
  }
  .login-title {
    padding-bottom: 20px;
    font-size: 30px;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    text-shadow: 2px 2px 2px #000;
  }
  .login-wrapper {
    padding: 50px 40px 30px;
    background-color: $contentWrapperColor;
    box-shadow: 0 15px 15px 0 rgba(1,1,1,0.1);
    -moz-box-shadow: 0 15px 15px 0 rgba(1,1,1,0.1);
    -webkit-box-shadow: 0 15px 15px 0 rgba(1,1,1,0.1);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
  }
  .login-btn-group {
    .login-btn {
      float: left;
      width: 48%;
      font-size: 15px;
      text-transform: uppercase;
      font-weight: bold;
      &:nth-child(2) {
        float: right;
      }
    }
  }
  .code-wrapper {
    @include fj(flex-start);
    img {
      margin-left: 10px;
    }
  }
  .remember-wrapper {
    @include fj;
    .forgot-link {
      display: block;
      text-align: left;
      padding-bottom: 0;
      line-height: 14px;
      font-size: 14px;
      text-decoration: underline;
      cursor: pointer;
    }
  }
  .forgot-password-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 20;
  }
  .forgot-password-cnt {
    position: relative;
    width: 100%;
    height: 100%;
    .masking {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      z-index: 2;
    }
    .forgot-password-box {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 4;
      .forgot-password {
        position: relative;
        width: 55%;
        min-width: 350px;
        min-height: 40%;
        margin: 7% auto auto;
        padding: 60px;
        text-align: left;
        background-color: $contentWrapperColor;
        box-shadow: 0 15px 15px 0 rgba(1,1,1,0.1);
        -moz-box-shadow: 0 15px 15px 0 rgba(1,1,1,0.1);
        -webkit-box-shadow: 0 15px 15px 0 rgba(1,1,1,0.1);
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        .close-btn {
          position: absolute;
          right: 5%;
          top: 20px;
          font-size: 30px;
          cursor: pointer;
        }
        .title {
          margin-bottom: 30px;
          font-size: 18px;
        }
        .tip-txt {
          margin-bottom: 40px;
          font-size: 14px;
        }
      }
    }
  }
  .email-sended-wrapper {
    text-align: center;
    font-size: 16px;
    .icon {
      margin-top: 50px;
      margin-bottom: 20px;
      font-size: 50px;
    }
    .bold {
      font-weight: bold;
    }
    .send-successful {
      .icon {
        color: #7ec801;
      }
    }
    .send-failure {
      .icon {
        color: #cc0000;
      }
      .btn {
        margin-top: 30px;
      }
    }
  }
  .get-captcha-code {
    margin-left: 10px;
    text-decoration: underline;
    cursor: pointer;
  }
</style>
